<template>
  <div :class="{'pagination-inline': inline}">
    <div class="pagination">
      <div class="page-size">
        <a-dropdown>
          <a-menu slot="overlay"
                  @click="handleMenuClick">
            <a-menu-item v-for="item in pageSizeOptions"
                         :key="item">{{item}}条/页</a-menu-item>
          </a-menu>
          <a-button>
            {{nowPageSize}}条/页
            <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <div class="page-previous">
        <a-button @click="pageNumberChange(current - 1)"
                  :disabled="current === 1">
          <a-icon type="left" />
        </a-button>
      </div>
      <div class="page-content">
        <ul :style="{left: -left + 'px'}">
          <li :class="{'is-active': item == current}"
              v-for="item in totalPage"
              :key="'totalPage' + item">
            <a-button @click="pageNumberChange(item)">{{item}}</a-button>
          </li>
        </ul>
      </div>
      <div class="page-next">
        <a-button @click="pageNumberChange(current + 1)"
                  :disabled="current === totalPage">
          <a-icon type="right" />
        </a-button>
      </div>
      <div class="page-jumper">
        <span>跳至</span>
        <a-input type="number"
                 v-model="jumperNumber"
                 @blur="jumperBlur"
                 :max="totalPage"
                 min="1"></a-input>
        <span>页</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nowPageSize: '10',
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      left: 0,
      totalPage: 1,
      jumperNumber: ''
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    defaultCurrent: {
      type: Number,
      default: 1
    },
    current: {
      type: Number,
      default: 1
    },
    inline: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    this.initNowPageSize(this.nowPageSize);
    this.initTotal(this.total);
    this.initCurrent(this.current);
  },
  methods: {
    onChange (pageNumber) {
      this.$emit('pageChange', pageNumber);
    },
    handleMenuClick (e) {
      if (this.nowPageSize !== e.key) {
        this.nowPageSize = e.key;
        this.$emit('pageSizeChange', e.key);
      }
    },
    pageNumberChange (pageNumber) {
      if (pageNumber !== this.current) {
        this.$emit('pageChange', pageNumber);
      }
    },
    jumperBlur () {
      let jumperNumber = parseInt(this.jumperNumber);
      if (jumperNumber < 0) jumperNumber = 1;
      else if (jumperNumber > this.totalPage) jumperNumber = this.totalPage;
      this.jumperNumber = jumperNumber;
      this.pageNumberChange(this.jumperNumber);
    },
    initTotal (e) {
      if (e <= 0) {
        this.totalPage = 1;
      } else {
        let total = parseInt(e);
        this.totalPage = parseInt((total - 1) / this.nowPageSize) + 1;
      }
    },
    initNowPageSize (e) {
      let total = this.total;
      if (total <= 0) {
        this.totalPage = 1;
      } else {
        this.totalPage = parseInt((total - 1) / e) + 1;
      }
    },
    initCurrent (e) {
      if (this.totalPage - e > 1 && e > 1) {
        this.left = (e - 2) * 32;
      } else if (this.totalPage - e < 2 && e > 4) {
        this.left = (this.totalPage - 4) * 32;
      } else {
        this.left = 0;
      }
    }
  },
  watch: {
    current (e) {
      this.initCurrent(e);
    },
    total (e) {
      this.initTotal(e);
    },
    nowPageSize (e) {
      this.initNowPageSize(e);
    }
  }
}
</script>

<style lang="less" scoped>
.activeStyle {
  color: @activeRed;
  border-color: @activeRed;
}

.buttonStyle {
  height: 24px;
  border-color: @greyBorder;
  border-radius: 3px;
  font-size: 12px;

  &:hover,
  &:active,
  &:focus {
    .activeStyle();
  }
}

.pagination-inline {
  display: inline-block;
}

.pagination {
  display: flex;
  flex-wrap: nowrap;

  .page-size {
    margin-right: 8px;
    .userUnSelect();

    .ant-btn {
      padding: 0 8px;
      .buttonStyle();
    }
  }

  .page-previous,
  .page-next {
    margin-right: 8px;
    .userUnSelect();

    .ant-btn {
      padding: 0;
      .buttonStyle();
      width: 24px;
      height: 24px;
      text-align: center;
    }
  }

  .page-next {
    margin-right: 16px;
  }

  .page-content {
    max-width: 120px;
    height: 24px;
    overflow: hidden;
    margin-right: 8px;
    .userUnSelect();

    ul {
      position: relative;
      display: flex;
      margin: 0;
      padding: 0;
      left: 0;
      transition: left 0.3s;
      -moz-transition: left 0.3s;
      -webkit-transition: left 0.3s;
      -o-transition: left 0.3s;

      li {
        width: 24px;
        height: 24px;
        margin-right: 8px;

        &:nth-last-child(1) {
          margin-right: 0;
        }

        .ant-btn {
          padding: 0;
          .buttonStyle();
          width: 24px;
          height: 24px;
          text-align: center;
        }

        &.is-active {
          .ant-btn {
            .activeStyle();
          }
        }
      }
    }
  }

  .page-jumper {
    display: flex;
    width: 100px;
    height: 24px;
    align-items: center;
    font-size: 12px;

    span {
      .userUnSelect();
    }

    .ant-input {
      width: 48px;
      margin: 0 8px;
      .buttonStyle();

      &:hover,
      &:active,
      &:focus {
        border-color: @activeRed;
      }
    }
  }
}
</style>
